<template>
  <div class="image">
    <div class="header">
      <div class="router">
        <div class="route" v-for="(item,index) in routeList" :key="index">
          <div class="router-view" @click="toPath($event,item.url)" v-if="index === 0">
            <img class="back" id="back" src="../../assets/zhome/back.png" alt />
            <span class="border"></span>
            <img class="back" src="../../assets/zhome/home.png" alt />
            <span class="title">{{ item.title }}</span>
          </div>
          <div class="router-next" @click="toPath($event,item.url)" v-else>
            <span class="bor" :class="index !== routeList.length - 1 ? 'gey':''"></span>
            <span class="title">{{ item.title }}</span>
          </div>
          <img
            v-if="index !== routeList.length - 1"
            class="icon-right"
            src="../../assets/zhome/right.png"
            alt
          />
        </div>
      </div>
    </div>
    <div class="contentd">
      <div class="left">
        <div class="head">
          <img src="../../assets/zhome/del.png" alt />
          <span>全部数据库(1/107)</span>
          <img src="../../assets/zhome/bottom.png" alt />
        </div>
        <div class="search">
          <el-input placeholder="查找国家/地区名或代码"></el-input>
          <img src="../../assets/zhome/search.png" alt />
        </div>
        <div class="left-cont">
          <div class="views" v-for="(item,index) in leftList" :key="index">
            <div class="parent">
              <img src="../../assets/zhome/del.png" alt />
              <span>{{ item.title }}</span>
              <img src="../../assets/zhome/bottom.png" alt />
            </div>
            <div class="child" v-for="(a,b) in item.child" :key="b">
              <img src="../../assets/zhome/nocheck.png" alt />
              <div class="img"></div>
              <span>{{ a.title }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="right-title">高级搜索</div>
        <div class="right-form">
          <div class="form">
            <span class="name">商标名称</span>
            <div class="form-right">
              <el-input placeholder="请输入"></el-input>
            </div>
          </div>
          <div class="form start">
            <span class="name">国际分类</span>
            <div class="form-right">
              <div class="check">
                <div class="check-view" v-for="(item,index) in 10" :key="index">
                  <img src="../../assets/zhome/nocheck.png" alt />01类 化学原料
                </div>
              </div>
            </div>
          </div>
          <div class="form" style="margin-top:-20px">
            <span class="name">商品服务</span>
            <div class="form-right">
              <el-input placeholder="请选择商品/服务项，多商品项用逗号分离"></el-input>
            </div>
          </div>
          <div class="form start">
            <span class="name">商标类型</span>
            <div class="form-right">
              <div class="check">
                <div class="check-view" v-for="(item,index) in 5" :key="index">
                  <img src="../../assets/zhome/nocheck.png" alt />01类 化学原料
                </div>
              </div>
            </div>
          </div>
          <div class="form start">
            <span class="name">商标有效性</span>
            <div class="form-right">
              <div class="check">
                <div class="check-view" v-for="(item,index) in 5" :key="index">
                  <img src="../../assets/zhome/nocheck.png" alt />01类 化学原料
                </div>
              </div>
            </div>
          </div>
          <div class="form start">
            <span class="name">商标状态</span>
            <div class="form-right">
              <div class="check">
                <div class="check-view" v-for="(item,index) in 5" :key="index">
                  <img src="../../assets/zhome/nocheck.png" alt />01类 化学原料
                </div>
              </div>
            </div>
          </div>
          <div class="form">
            <div class="name">
              中国法律状态
              <img src="../../assets/zhome/tips.png" alt />
            </div>
            <div class="form-right">
              <div class="check">
                <el-select v-model="value" placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </div>
            </div>
          </div>
          <div class="form">
            <span class="name">申请人</span>
            <div class="form-right">
              <el-input placeholder="请输入"></el-input>
            </div>
          </div>
          <div class="form">
            <div class="name">
              [标]申请人
              <img src="../../assets/zhome/tips.png" alt />
            </div>
            <div class="form-right">
              <el-input placeholder="请输入"></el-input>
            </div>
          </div>
          <div class="form">
            <div class="name">申请日</div>
            <div class="form-right" style="display:flex">
              <div style="width: 240px">
                <el-select v-model="value" placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </div>
              <div style="flex:1;margin-left: 20px;">
                <el-date-picker
                  v-model="value1"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="年/月/日"
                  end-placeholder="年/月/日"
                  :size="size"
                />
              </div>
            </div>
          </div>
          <div class="form">
            <div class="name">注册日</div>
            <div class="form-right" style="display:flex">
              <div style="width: 240px">
                <el-select v-model="value" placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </div>
              <div style="flex:1;margin-left: 20px;">
                <el-date-picker
                  v-model="value1"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="年/月/日"
                  end-placeholder="年/月/日"
                  :size="size"
                />
              </div>
            </div>
          </div>
        </div>
        <div class="right-font">
          <span>重置筛选</span>
          <span>立即搜索</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
const router = useRouter();
const route = useRoute();
let routeList = ref([
  { title: "首页", url: "/home" },
  { title: "查商标", url: "/trademark/index" },
  { title: "高级搜索" }
]);

let options = ref([]);
let value = ref("");
const back = () => {
  router.go(-1);
};

const toPath = (e, url) => {
  let id = e.target.id;
  console.log(id);
  if (id === "back") {
    back();
    return;
  }
  if (!url) {
    return;
  }
  router.push(url);
};

let leftList = ref([
  {
    title: "中国(1/4)",
    isOpen: true,
    isAll: true,
    child: [
      {
        title: "中国(CN)",
        icon: "",
        isOpen: true
      },
      {
        title: "中国(CN)",
        icon: "",
        isOpen: true
      }
    ]
  },
  {
    title: "中国(1/4)",
    isOpen: true,
    isAll: true,
    child: [
      {
        title: "中国(CN)",
        icon: "",
        isOpen: true
      }
    ]
  }
]);
</script>
<style lang="scss" scoped>
::v-deep .el-range-editor.el-input__wrapper {
  width: 100%;
}
::v-deep .el-date-editor .el-range-input {
  text-align: left;
  padding-left: 10px;
}
::-webkit-scrollbar {
  width: 0px; /* 设置滚动条宽度 */
}

/* 水平滚动条样式 */
::-webkit-scrollbar-track {
  background-color: #f5f5f5; /* 设置滑道背景色 */
}

::-webkit-scrollbar-thumb {
  background-color: #aaa; /* 设置滑块背景色 */
  border-radius: 4px; /* 设置滑块圆角 */
}

/* 垂直滚动条样式 */
::-webkit-scrollbar-corner {
  display: none; /* 去除交叉点 */
}

/* Firefox浏览器支持 */
@supports (-moz-appearance: none) {
  ::-moz-scrollbar {
    width: 8px; /* 设置滚动条宽度 */
  }

  ::-moz-scrollbar-track {
    background-color: #f5f5f5; /* 设置滑道背景色 */
  }

  ::-moz-scrollbar-thumb {
    background-color: #aaa; /* 设置滑块背景色 */
    border-radius: 4px; /* 设置滑块圆角 */
  }
}
.image {
  height: 100%;
  background-color: #f5f7fa;
  padding: 0 240px 60px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  position: relative;
  .header {
    width: calc(100% - 240px);
    height: 52px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding-left: 240px;
    position: fixed;
    background-color: #f5f7fa;
    top: 110px;
    left: 0;
    z-index: 9999;
  }
  .contentd {
    flex: 1;
    padding: 52px 0 57px;
    background: #f5f7fa;
    display: flex;
    .left {
      width: 320px;
      background: #ffffff;
      border-radius: 4px;
      margin-right: 20px;
      display: flex;
      flex-direction: column;
      &-cont {
        flex: 1;
        overflow-y: auto;
      }
      .views {
        padding: 10px 0 0;
        cursor: pointer;
        .parent {
          padding: 10px 20px;
          display: flex;
          align-items: center;
          font-size: 12px;
          font-family: PingFang SC, PingFang SC-Regular;
          font-weight: 400;
          text-align: left;
          color: #202020;
          line-height: 16px;
          span {
            margin: 0 4px 0 10px;
          }
        }
        .child {
          padding: 10px 20px 10px 62px;
          font-size: 12px;
          font-family: PingFang SC, PingFang SC-Regular;
          font-weight: Regular;
          text-align: left;
          color: #202020;
          line-height: 16px;
          display: flex;
          align-items: center;
          .img {
            width: 24px;
            height: 16px;
            background: #ee1c25;
            margin: 0 8px;
          }
        }
      }
      .search {
        width: 280px;
        height: 32px;
        background: #f4f6fa;
        border-radius: 2px;
        margin-left: 20px;
        display: flex;
        align-items: center;
        position: relative;
        margin-bottom: 5px;
        img {
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          right: 12px;
          width: 16px;
          height: 16px;
        }
      }
      .head {
        font-size: 12px;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 400;
        text-align: left;
        color: #575966;
        line-height: 16px;
        display: flex;
        align-items: center;
        padding-left: 20px;
        padding-bottom: 15px;
        padding-top: 17px;
        span {
          margin: 0 4px 0 10px;
        }
      }
    }
    .right {
      flex: 1;
      background: #ffffff;
      border-radius: 4px;
      padding: 20px;
      display: flex;
      flex-direction: column;
      &-form {
        flex: 1;
        padding-bottom: 138px;
      }
      &-font {
        padding-top: 18px;
        border-top: 1px solid #d6dce0;
        flex-shrink: 0;
        width: calc(100% + 40px);
        transform: translateX(-20px);
        display: flex;
        justify-content: flex-end;
        span {
          margin-right: 20px;
          cursor: pointer;
        }
        span:first-of-type {
          width: 80px;
          height: 36px;
          background: #f5f6f8;
          border-radius: 2px;
          font-size: 14px;
          font-family: PingFang SC, PingFang SC-Regular;
          font-weight: 400;
          text-align: center;
          color: #202020;
          line-height: 36px;
        }
        span:last-of-type {
          width: 80px;
          height: 36px;
          background: #0052d9;
          border-radius: 2px;
          font-size: 14px;
          font-family: PingFang SC, PingFang SC-Regular;
          font-weight: 400;
          text-align: center;
          color: #ffffff;
          line-height: 36px;
        }
      }
      &-title {
        font-size: 16px;
        font-family: PingFang SC, PingFang SC-Semibold;
        font-weight: 600;
        text-align: left;
        color: #202020;
      }
      .start {
        align-items: flex-start !important;
      }
      .form {
        display: flex;
        align-items: center;
        padding-top: 20px;
        .name {
          width: 8em;
        }
        .form-right {
          flex: 1;
          .check {
            display: flex;
            flex-wrap: wrap;
            padding-right: 180px;
            &-view {
              margin-right: 50px;
              font-size: 14px;
              font-family: PingFang SC, PingFang SC-Regular;
              font-weight: 400;
              text-align: left;
              color: #202020;
              cursor: pointer;
              display: flex;
              align-items: center;
              margin-bottom: 20px;
              img {
                margin-right: 8px;
              }
            }
          }
        }
      }
    }
  }
}

.router {
  display: flex;
  .title {
    font-size: 12px;
    font-family: PingFang SC, PingFang SC-Regular;
    font-weight: 400;
    text-align: left;
    color: #575966;
  }
  .route {
    display: flex;
    align-items: center;
    .icon-right {
      width: 10px;
      height: 10px;
      margin: 0 10px;
    }
  }
  &-next {
    padding: 0 12px;
    height: 32px;
    background: #ffffff;
    border-radius: 2px;
    display: flex;
    align-items: center;
    cursor: pointer;
    .bor {
      width: 6px;
      height: 6px;
      background: #0052d9;
      border-radius: 3px;
      margin-right: 10px;
    }
    .gey {
      background: #575966;
    }
  }
  &-view {
    padding: 0 12px;
    height: 32px;
    background: #ffffff;
    border-radius: 2px;
    display: flex;
    align-items: center;
    cursor: pointer;
    .border {
      width: 1px;
      height: 10px;
      background: #d8d8d8;
      margin: 0 12px;
    }
    .title {
      margin-left: 10px;
    }
    .back {
      width: 14px;
      height: 14px;
    }
  }
}
</style>